<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米账号-登录</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
        }

        li {
            list-style: none;
        }

        .header {
            display: block;
            width: 1130px;
            height: 98px;
            margin: 0 auto;
            text-align: center;
        }

        .logo {
            float: left;
            display: block;
            width: 55px;
            height: 55px;
            background-image: url(images/mi-logo.png);
            background-color: #FF6700;
            background-position: 50%;
            margin-top: 20px;
        }

        .logo_text {
            float: left;
            margin-left: 10px;
            margin-top: 20px;
        }

        .logo_text h2 {
            font-weight: 400;
            letter-spacing: 5px;
        }

        .logo_text p {
            margin-top: 5px;
            font-size: 6px;
        }

        /* 中间部分开始 */
        .middle {
            position: relative;
            height: 588px;
            background-image: url(images/register_middle_banner.jpg);
            background-repeat: no-repeat;
            background-position: 50% 0;
        }

        .user {
            position: absolute;
            top: 35px;
            right: 190px;
            width: 410px;
            height: 556px;
            background-color: white;
        }

        .user_header {
            height: 82px;
            text-align: center;
            line-height: 82px;
        }

        .user_header a {
            padding: 27px 0 24px;
            text-align: center;
            font-size: 24px;
            color: #666;
        }

        .user_header a:hover {
            color: #FF6700;
        }

        .line {
            width: 1px;
            height: 24px;
            margin: 0 35px 0 42px;
            border: 1px solid #e0e0e0;
            background: #e0e0e0;
        }

        .user_middle input {
            color: #686868;
            width: 306px;
            height: 25px;
            border: 1px solid #e0e0e0;
            padding: 13px 16px 13px 14px;
            margin: 0 0 20px 35px;
        }

        .user_middle>a {
            display: block;
            width: 308px;
            height: 25px;
            background-color: #FF6700;
            padding: 13px 16px 13px 14px;
            margin: 0 0 15px 35px;
            color: white;
            font-size: 14px;
            text-align: center;
            line-height: 25px;
        }

        .user_middle li {
            width: 308px;
            padding-bottom: 35px;
            margin: 0 0 0 45px;
            font-size: 14px;
            text-align: center;

        }

        .user_middle li a {
            color: #757575;
        }

        .user_middle li a:hover {
            color: #FF6700;
        }

        .user_footer img {
            margin: 80px 0 0 80px;
        }

        .footer {
            display: block;
            height: 30px;
            margin: 100px 0 0 600px;

        }

        .footer li {
            float: left;
        }

        .footer li a,
        .footer li span {
            color: #757575;
            font-size: 14px;
        }

        .footer li a {
            display: inline-block;
            height: 19px;
            padding: 0 10px;
            text-align: center;
        }

        .footer li a:hover {
            color: #FF6700;
        }
    </style>
</head>

<body>
    <!-- 头部部分 开始 -->
    <div href="#" class="header">
        <a href="index.html" class="logo"></a>
        <div class="logo_text">
            <h2>小米商城</h2>
            <p>让每个人都能享受科技的乐趣</p>
        </div>

    </div>
    <!-- 头部部分 结束 -->


    <!-- 中间部分 开始 -->
    <div class="middle">
        <div class="user">
            <div class="user_header">
                <div class="title">
                    <a href="#">账号登录</a>
                    <span class="line"></span>
                    <a href="#">扫码登录</a>
                </div>
            </div>
            <div class="user_middle">
                <input type="text" placeholder="邮箱/手机号码/小米ID">
                <input type="password" name="mima" id="password" placeholder="密码">
                <a href="#">登录</a>
                <li><a href="#">手机短信登录/注册</a></li>
                <li><a href="login.html">立即注册</a> <span>|</span> <a href="#">忘记密码</a></li>
            </div>
            <div class="user_footer"><img src="images/register_middle_last.png" alt=""></div>
        </div>
    </div>
    <!-- 中间部分 结束 -->


    <!-- 尾部部分 开始 -->
    <div class="footer">
        <ul>
            <li><a href="#">简体</a><span>|</span></li>
            <li><a href="#">繁体</a><span>|</span></li>
            <li><a href="#">English</a><span>|</span></li>
            <li><a href="#">常见问题</a><span>|</span></li>
            <li><a href="#">隐私政策</a></li>
        </ul>

    </div>
    <!-- 尾部部分 结束 -->
</body>

</html>